<template>
  <div id="warehousing">
    <div class="header">
      <div class="documentInput">
        <el-input placeholder="单据编码" v-model="from.documentInput" clearable>
        </el-input>
      </div>
      <div class="saleInput">
        <el-input placeholder="销售单号" v-model="from.saleInput" clearable>
        </el-input>
      </div>
      <div class="materialInput">
        <el-input placeholder="物料编码" v-model="from.materialInput" clearable>
        </el-input>
      </div>
      <div class="materialNameInput">
        <el-input
          placeholder="物料名称"
          v-model="from.materialNameInput"
          clearable
        >
        </el-input>
      </div>
      <div class="timeInput">
        <el-date-picker
          v-model="from.timeInput"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </div>
      <div>
        <el-button icon="el-icon-search" type="primary">搜索</el-button>
      </div>
    </div>
    <div class="header-Bottom">
      <div class="header-Bottom-Left">
        <div class="document">
          <el-button icon="el-icon-document" type="primary">单据</el-button>
        </div>
        <div class="selectBut">
          <el-button icon="el-icon-menu" type="primary">查询所有</el-button>
        </div>
        <div class="elSelect">
          <el-select v-model="from.selectValue" clearable placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="addBut">
          <el-button icon="el-icon-plus" type="primary">新增</el-button>
          <el-button icon="el-icon-plus" type="primary">审核</el-button>
          <el-button icon="el-icon-plus" type="primary">反审核</el-button>
          <el-button icon="el-icon-plus" type="primary">打印</el-button>
        </div>
      </div>
      <div class="header-Bottom-right"></div>
    </div>
  </div>
</template>
      <script>
export default {
  name: "warehousing",
  data() {
    return {
      from: {
        documentInput: "",
        saleInput: "",
        materialInput: "",
        materialNameInput: "",
        timeInput: "",
        selectValue: "",
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      options: [
        {
          value: "1",
          label: "成品仓",
        },
        {
          value: "2",
          label: "半成品仓",
        },
        {
          value: "3",
          label: "零部件仓",
        },
        {
          value: "4",
          label: "原料仓",
        },
        {
          value: "5",
          label: "五金仓",
        },
      ],
    };
  },
};
</script>
<style lang="less" scoped>
.header {
  display: flex;
  margin-bottom: 25px;
  .documentInput,
  .saleInput,
  .materialInput,
  .materialNameInput,
  .timeInput {
    margin-right: 10px;
  }
}
.header-Bottom {
  display: flex;
  justify-content: space-between;
  .header-Bottom-Left {
    display: flex;
    .document,
    .selectBut,
    .elSelect,
    .addBut {
      margin-right: 10px;
    }
  }
}
</style>
    <style>
.header .el-input__inner {
  height: 36px;
  line-height: 36px;
  width: 200px;
}
.header .el-button--primary {
  height: 36px;
  line-height: 36px;
  padding: 0 20px;
}
.header .el-date-editor .el-range-separator {
  line-height: 30px;
}
.header-Bottom .el-button--primary {
  height: 30px;
  line-height: 30px;
  padding: 0 18px;
  font-size: 12px;
}
.header-Bottom .selectBut .el-button--primary {
  background: #e8f4ff;
  color: #1890ff;
}
.header-Bottom .el-select .el-input__inner {
  height: 30px;
  line-height: 30px;
  width: 150px;
}
.header-Bottom .elSelect .el-input__icon {
  line-height: 30px;
}
.header-Bottom .addBut .el-button--primary {
  background: #e8f4ff;
  color: #1890ff;
}
</style>
      